<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>讯飞星火认知大模型接入网页成功（各个版本）</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      h1 {
        text-align: center;
        color: #5165ea;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        background-color: #f3f8f9;
      }
      body {
        padding: 10%;
      }
      #results {
        width: 100%;
        height: 80%;
        background-color: #e2eeff;
      }
      #results #result {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        padding: 10%;

        background-color: #e2eeff;
        white-space: pre-line;
      }
      #sendVal {
        display: flex;
        width: 100%;
        height: 20%;
      }
      #sendVal #question {
        width: 70%;
        height: 100%;
        padding: 5%;
        border: 2px dotted blue;
      }
      #sendVal #btn {
        width: 30%;
        height: 100%;
        background-color: #5d7cff;
      }
      .user-message {
        background-color: #d1f7d1; /* 用户消息背景色 */
        padding: 10px;
        margin: 5px 0;
        border-radius: 5px;
        max-width: 70%;
        align-self: flex-start; /* 将用户消息放置在左侧 */
      }

      .assistant-message {
        background-color: #f1f1f1; /* 助手消息背景色 */
        padding: 10px;
        margin: 5px 0;
        border-radius: 5px;
        max-width: 70%;
        align-self: flex-end; /* 将助手消息放置在右侧 */
      }
    </style>
  </head>

  <body>
    <h1>讯飞星火认知大模型接入网页成功（各个版本）</h1>
    <div id="results">
      <div id="result"></div>
    </div>
    <div id="sendVal">
      <input id="question" type="text" />
      <button id="btn">发送信息</button>
    </div>
    <script type="module" src="main.js"></script>
  </body>
</html>
